<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: 灰佳小白 1150248441@qq.com
 * @LastEditTime: 2022-06-29 15:34:17
-->
<template>
<div class="EpidemicDynamic">
    <!-- 疫情动态数据展示 -->
    <div class="epidemicDyn">
        <!-- 当前时间 -->
        <div class="nowtime">{{ new Date() | fmtDate }}</div>
        <div class="first">
            <!-- 新增确诊盒子 -->
            <div class="box">
                <!-- 数量 -->
                <div class="num">
                    {{ NcvoData.confirmedIncr }}
                </div>
                <!-- 标题 -->
                <div class="title">新增确诊</div>
            </div>
            <!-- 新增治愈盒子 -->
            <div class="box">
                <!-- 数量 -->
                <div class="num">
                    {{ NcvoData.curedIncr }}
                </div>
                <!-- 标题 -->
                <div class="title">新增治愈</div>
            </div>
            <!-- 新增死亡盒子 -->
            <div class="box">
                <!-- 数量 -->
                <div class="num">
                    {{ NcvoData.deadIncr }}
                </div>
                <!-- 标题 -->
                <div class="title">新增死亡</div>
            </div>
        </div>

        <div class="nowtime">截止时间:{{ new Date() | fmtDate }}</div>
        <div class="second">
            <div class="box">
                <!-- 数量 -->
                <div class="num" style="color: #ff6738">
                    {{ NcvoData.currentConfirmedCount }}
                </div>
                <!-- 标题 -->
                <div class="title">现存确诊</div>
            </div>
            <div class="box">
                <!-- 数量 -->
                <div class="num" style="color: #1faeae">
                    {{ NcvoData.seriousCount }}
                </div>
                <!-- 标题 -->
                <div class="title">现有无症状</div>
            </div>
            <div class="box">
                <!-- 数量 -->
                <div class="num" style="color: #af6c58">
                    {{ NcvoData.suspectedCount }}
                </div>
                <!-- 标题 -->
                <div class="title">累积境外输入</div>
            </div>
            <div class="box">
                <!-- 数量 -->
                <div class="num" style="color: #ff6738">
                    {{ NcvoData.confirmedCount }}
                </div>
                <!-- 标题 -->
                <div class="title">累积确诊</div>
            </div>
            <div class="box">
                <!-- 数量 -->
                <div class="num" style="color: #c03833">
                    {{ NcvoData.curedCount }}
                </div>
                <!-- 标题 -->
                <div class="title">累积治愈</div>
            </div>
            <div class="box">
                <!-- 数量 -->
                <div class="num" style="color: #637da3">
                    {{ NcvoData.deadCount }}
                </div>
                <!-- 标题 -->
                <div class="title">累计死亡</div>
            </div>
        </div>
    </div>
    <!-- 国内疫情数据 -->
    <div class="inLIndCovid">
        <div class="nowtime">国内病例</div>
        <div class="tableContent">
            <el-table :data="inLandCovidData" border style="width: 100%" :header-cell-style="headClass">
                <el-table-column prop="province" label="地区" align="center">
                </el-table-column>
                <el-table-column prop="confirmed" label="新增确诊" align="center">
                </el-table-column>
                <el-table-column prop="suspected" label="新增疑似" align="center">
                </el-table-column>
                <el-table-column prop="dead" label="新增死亡" align="center">
                </el-table-column>
                <el-table-column prop="cure" label="新增治愈" align="center">
                </el-table-column>
                <el-table-column prop="outside" label="境外输入" align="center">
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination small layout="total, prev, pager, next" :total="totalabc" :current-page.sync="page1" :page-size="5" @current-change="handleCurrentChange1">
        </el-pagination>
    </div>

    <div class="nowtime">最新进展</div>
    <!-- 最新进展 -->
    <div class="lastedProgress">
        <!-- 新闻列表展示区 -->
        <div class="newsList">
            <el-timeline>
                <el-timeline-item v-for="item in newsListData" :size="'normal'" :color="item.color" :key="item.id" :timestamp="item.publishTime | fmtDate" placement="top" @click.native="openModel(item)">
                    <el-card>
                        <h4>{{item.title}}</h4>
                        <!-- <p v-html="item.content"></p> -->
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>
        <!-- 分页 -->
        <el-pagination layout="total, prev, pager, next" :total="total" :page-size="10" @current-change="handleCurrentChange">
        </el-pagination>
    </div>

    <!-- 模态框区域 -->
    <el-dialog :title="newsTitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <div v-html="newsContent"></div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import {
    get,
    del,
    post
} from "@/utils/request";
import axios from "axios";
export default {
    data() {
        return {
            NcvoData: [],
            inLandCovidData: [],
            newsListData: [],
            dialogVisible: false,
            newsTitle: "",
            newsContent: "",
            total: 0,
            totalabc: 0,
            page: 1,
            page1: 1,
        };
    },

    methods: {
         //表头样式设置
      headClass({columnIndex,rowIndex}) {
          let cellStyle;
         if(columnIndex === 0 ){
              cellStyle = "background:#e0e1fd;color:#515050"
          return  cellStyle;
      }
      if(columnIndex === 1 ){
              cellStyle = "background:#dd837f;color:#515050"
          return  cellStyle;
      }
      if(columnIndex === 2 ){
              cellStyle = "background:#f4d3aa;color:#515050"
          return  cellStyle;
      }
      if(columnIndex === 3 ){
              cellStyle = "background:#fdcccb;color:#515050"
          return  cellStyle;
      }
      if(columnIndex === 4 ){
              cellStyle = "background:#c5eab4;color:#515050"
          return  cellStyle;
      }
       if(columnIndex === 5 ){
              cellStyle = "background:#d2d2d2;color:#515050"
          return  cellStyle;
      }
      
      },
        // async getNcovData() {
        //     let params = {
        //         key: 'a6fac0740f14b798fbf9a8f9217a7925'
        //     };
        //     let res = await get("http://api.tianapi.com/ncov/index", params);
        //     // console.log(res.newslist[0].desc);
        // },
        getNcovData() {
            axios({
                url: "http://api.tianapi.com/ncov/index?key=a6fac0740f14b798fbf9a8f9217a7925",
            }).then((res) => {
                // console.log(res.data.newslist[0].desc);
                this.NcvoData = res.data.newslist[0].desc;
            });
        },
        async getInLandCovidData() {
            let params = {
                page: this.page1,
                pageSize: 5,
            };
            let res = await get("/epidemic/pageQuery", params);
            this.inLandCovidData = res.data.list;
            this.totalabc = res.data.total;
            // console.log(this.totalabc);
        },
        async getNewsData() {
            let params = {
                page: this.page,
                pageSize: 10,
            };
            let res = await get("/article/pageQuery", params);
            // console.log(res.data.list);
            this.newsListData = res.data.list;
            this.getColor();
            this.total = res.data.total;
        },
        getColor() {
            for (let j = 0; j < 10; j++) {
                let num = '';
                for (let i = 0; i < 6; i++) { //循环输出四位验证码
                    let tmp = Math.ceil((Math.random() * 15)); //取出一位十六进制的整数
                    if (tmp > 9) { //依次判断随机数
                        switch (tmp) {
                            case (10): //如果随机数等于10，换为a
                                num += 'a';
                                break;
                            case (11):
                                num += 'b'; //如果随机数等于11，换为b
                                break;
                            case (12):
                                num += 'c'; //如果随机数等于12，换为c
                                break;
                            case (13):
                                num += 'd'; //如果随机数等于13，换为d
                                break;
                            case (14):
                                num += 'e'; //如果随机数等于14，换为e
                                break;
                            case (15):
                                num += 'f'; //如果随机数等于15，换为f
                                break;
                        }
                    } else {
                        num += tmp;
                    }
                }

                this.newsListData[j].color = '#' + num;
            }
            // console.log(this.newsListData.color);
        },
        openModel(item) {
            this.dialogVisible = true;
            this.newsTitle = item.title;
            this.newsContent = item.content;
        },
        handleClose() {
            this.dialogVisible = false;
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getNewsData();
        },
        handleCurrentChange1(val) {
            this.page1 = val;
            this.getInLandCovidData();
        },
    },

    mounted() {},

    created() {
        this.getNcovData();
        this.getInLandCovidData();
        this.getNewsData();
    },
};
</script>

<style scoped>
.nowtime {
    color: rgb(51, 50, 50);
    margin: 5px;
}

/* 第一部分样式设置 */
.first {
    display: flex;
    /* 分配剩余空间 */
    justify-content: space-between;
}

/* 第一部分中盒子样式 */
.first .box,
.second .box {
    background-color: #e3f6fd;
    width: 33%;
    height: 120px;
    border-radius: 5px;
    text-align: center;
}

.first .box .num,
.second .box .num {
    margin-top: 15px;
    font-weight: bold;
}

.first .box .title,
.second .box .title {
    margin-top: 25px;
}

.second {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.second .box {
    background-color: #fbf5ef;
    margin-bottom: 5px;
}

/* 最新进展的样式处理 */
.lastedProgress {
    margin-left: -10px;
}
</style>
